<template>
    <div>
        <Header title="热映电影"/>
        <div v-for="(movie,index) in movies" :key="movie.id"
             class="movie-item border-bottom">
            <img :src="movie.images.small"/>
            <div class="movie-content">
                <p class="movie-title">{{movie.title}}</p>
                <p class="movie-cast">主演:{{movie.casts | castFormat}}</p>
                <p class="movie-cast">导演:{{movie.directors | directorFormat}}</p>
                <p class="movie-cast">上映时间:{{movie.year}}</p>
            </div>
        </div>
    </div>
</template>

<script>
    import Header from './Header'

    export default {
        name: "MovieHot",
        components: {
            Header
        },
        data() {
            return {
                movies: []
            }
        },
        mounted() {
            this.$axios.get('/in_theaters')
                .then((res) => {
                    this.movies = res.data.subjects
                    console.log(this.movies)
                }).catch((err) => {

            })
        },
        // 声明一个本地的过滤器
        filters: {
            castFormat(array) {
                var cast = ''
                array.forEach((item, index) => {
                    if (index != 0)
                        cast += ","
                    cast += item.name
                })
                return cast
            },
            directorFormat(array) {
                var director = ''
                array.forEach((item, index) => {
                    if (index != 0)
                        director += ","
                    director += item.name
                })
                return director
            }
        }
    }
</script>

<style lang="stylus" scoped>
    .movie-item
        display: flex;
        width: 100%;
        height: 150px;
        img
            width: 130px;
            height: 130px;
            margin: auto 0;
            margin-left: 10px;
        .movie-content
            display: flex;
            flex: 1;
            flex-direction: column;
            margin-left: 10px;
            margin-right: 10px;
            .movie-title
                font-size: 16px;
                margin-top: 10px;
                text-align: left;
                font-weight: bold;
            .movie-cast
                margin-top: 5px;
                min-width: 0px;
                text-align: left;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
                overflow: hidden;
                text-overflow: ellipsis;
                max-height: 28px;
                line-height: 14px;
                font-size: 14px;
</style>
